{include file="/common/vue3" /}
<div id="app">
    <el-calendar v-model="valueData">
        <template
          #date-cell="{ data }"
        >
        <!--自定义内容-->
          <div @click="handleClick(data)"> 
             <div class="calendar-day">{{ data.day.split('-').slice(2).join('-') }}</div>
               <div v-for="item in calendarData">
                 <div v-if="(item.months).indexOf(data.day.split('-').slice(1)[0])!=-1">
                   <div v-if="(item.days).indexOf(data.day.split('-').slice(2).join('-'))!=-1">
                      <el-tooltip class="item" effect="dark" :content="item.things" placement="top">
                        <div class="is-selected" v-if="item.status==='教室关闭'"><font color=red>{{item.status}}</font></div>
                        <div class="is-selected" v-else>{{item.status}}</div>
                      </el-tooltip>
                   </div>
                   <div v-else></div>
                 </div>
                 <div v-else></div>
               </div>
             </div>
          </div>
      </template>
    </el-calendar>
    <el-dialog v-model="showPill" :title="dialogTitle" width="500">
      <el-row :class="index % 2 === 0 ? `lightgreen-box`: `orange-box`" v-for="(item,index) in pillData" :key="index" v-if="pillData.length>0">
        <el-col :sm="6" >{{ item.start }}</el-col>
        <el-col :sm="6" >{{ item.end }}</el-col>
        <el-col :sm="6" >
          {{item.price}} &nbsp;元
        </el-col>
        <el-col :sm="6" >
          <div v-if="item.is_open==='1'"><font color="blue">开放</font></div>
          <div v-else><font color="gray">占用</font></div>
        </el-col>
      </el-row>
      <el-row v-else>
        <el-col>当天教室关闭</el-col>
      </el-row>
    </el-dialog>

</div>
<input type="hidden" id="room_id" value="{$row.id}" />
<style>
  .lightgreen-box {
    background-color: white;
    height: 28px;
  }
  .orange-box {
    background-color: #e4e4e4;
    height: 28px;
  }
</style>
